<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<div class="am-cf shop-main" style="padding-top:0px;">
  <!-- sidebar start -->
  <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only shop-menu" data-am-offcanvas="{target: '#shop-offcanvas'}"></a>
  <div class="sidebar shop-sidebar am-offcanvas" id="shop-offcanvas"></div>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li class="am-active"><span class="am-icon-home am-icon-fw"> </span>会员中心首页</li>
      </ol>
      
      <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
        <div class="am-panel-bd am-g am-padding-0">
          <table class="am-table am-table-bordered am-table-compact am-text-nowrap am-margin-0">
            <tbody>
            <tr>
              <th>宠物数量</th>
              <td>&nbsp;&nbsp;<a id="petNum" class="am-badge am-badge-warning am-circle" href="member_product_list.html">-</a></td>
              <th>粉丝数量</th>
              <td>&nbsp;&nbsp;<a id="fansNum" class="am-badge am-badge-secondary am-circle" href="member_follow_list.html">-</a></td>
            </tr>
            <tr>
              <th>注册日期</th>
              <td><span id="createTime">-</span></td>
              <th>收藏数量</th>
              <td>&nbsp;&nbsp;<a id="followNum" class="am-badge am-badge-success am-circle" href="member_favorite_list.html">-</a></td>
            </tr>
            <tr>
              <th>登录时间</th>
              <td><span id="loginTime"></span></td>
              <th>登录IP</th>
              <td><span id="loginIp"></span></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li class="am-active"><span class="am-icon-gift am-icon-fw"> </span>我的收货订单</li>
        &emsp;<a href="member_receiver_order_list.html">更多></a>
      </ol>
      <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
        <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
          <table id="tblReceiveOrderList" class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
          <thead>
            <tr>
              <th>订单编号</th>
              <th>下单时间</th>
              <th>订单金额</th>
              <th>商品名称</th>
              <th>订单状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          </table>
          <div id="receiveNoData" style="display: none;" class="am-kai am-text-center am-margin">
            <h3>没有找到任何记录!</h3>
          </div>
        </div>
      </div>

      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li class="am-active"><span class="am-icon-fighter-jet am-icon-fw"> </span>我的出货订单</li>
        &emsp;<a href="member_send_order_list.html">更多></a>
      </ol>
      <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
        <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
          <table id="tblSendOrderDetailList" class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
            <thead>
            <tr>
              <th>订单编号</th>
              <th>买家</th>
              <th>下单时间</th>
              <th>订单金额</th>
              <th>商品名称</th>
              <th>订单状态</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
          <div id="sendNoData" style="display: none;" class="am-kai am-text-center am-margin">
            <h3>没有找到任何记录!</h3>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    // 首页列表Map
    let indexMap = new Object();

    let jsonUser;
    let token;

    $(function(){

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'login.html';
            return;
        }


        // 加载公共侧边栏模板
        $('.sidebar').load('sidebar.html');

        // 加载'首页'数据
        loadIndex();

    });// $(function());

/** 加载'首页'数据 **/
function loadIndex() {

    // 加载个人信息
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/index/user',
        async: false,
        data: { token: token },
        success: function (result) {

            // 如果返回的是token失效，就重新登录
            if (result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'login.html';
                    }
                });// Modal.confirm();

                return;
            }

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }


            // 如果返回的响应码正确，就进行数据填充
            indexMap = result.data;

            // 填充用户区域数据
            fillUserInfo();

            // 填充收货订单列表数据
            fillReceiveOrderList();

            // 填充出货订单列表数据
            fillSendOrderList();

        }// success(result);

    });// $.ajax();

}// loadIndex();

/** 填充‘用户信息区域’数据 **/
function fillUserInfo(){

    let user = indexMap.user;

    // 宠物数量
    $('#petNum').html(user.petNum);
    // 粉丝数量
    $('#fansNum').html(user.fansNum);
    // 注册日期
    $('#createTime').html(user.createTime);
    // 收藏数量
    $('#followNum').html(user.followNum);
    // 登录时间
    $('#loginTime').html(user.loginTime);
    // 登录ip
    $('#loginIp').html(user.loginIp);

}// fillUserInfo();

/** 填充‘收货订单列表’数据 **/
function fillReceiveOrderList(){

    let orderList = indexMap.receiveOrderList;

    // 清空表格数据
    $('#tblReceiveOrderList tbody').empty();
    // 隐藏显示提示
    $('#receiveNoData').hide();

    // 如果没有集合数据，就直接返回
    if( !orderList || orderList.length == 0 ){
        // 设置没有数据提示
        $('#receiveNoData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < orderList.length; i++ ) {

        let order = orderList[i];

        // 订单编号
        let tdOrderNo = '<td><a href="member_order_view.html?id=' + order.id + '">' + order.orderNo + '</a></td>';

        // 下单时间
        let tdCreateTime = '<td><span title="' + order.createTime + '">' + order.createTime + '</span></td>';

        // 订单金额
        let tdPayment = '<td><strong class="am-text-danger">' + priceCurrencyFormat(order.payment) + '</strong></td>';

        // 订单状态
        let status = ORDER_STATUS[order.status];
        // 订单状态样式
        let statusIcon = ORDER_STATUS_ICON[order.status];

        let tdStatus = '<td><span class="am-badge ' + statusIcon + '">' + status + '</span></td>';

        // 商品名称列表
        let productNameList = '';

        // 循环遍历，拼接商品名称列表字符串
        for( let k = 0; k < order.orderDetailList.length; k++ ) {

            let orderDetail = order.orderDetailList[k];
            productNameList += orderDetail.productName + '，';
        }

        // 去掉最后1位(,)逗号
        productNameList = productNameList.substring(0, productNameList.length - 1);

        // 截取商品名称列表字符串（防止超过长度）
        if( productNameList.length > 30 ) {
            productNameList = productNameList.substring(0, 30) + '...';
        }

        // 商品名称
        let tdProductName = '<td><a title="' + productNameList + '" href="member_order_view.html?id=' + order.id + '">'
            + '<div class="am-text-truncate shop-text-truncate-order-product-name">'
            + productNameList + '</div></a></td>';



        // 操作
        let tdOpt = '<td><div class="am-btn-group am-btn-group-xs">';

        // '取消'按钮
        let btnCancel = '<button type="button" class="am-btn am-btn-default am-btn-xs app-table-button-padding" onclick="cancelOrder(\'' + order.id + '\')">'
            + '<span class="am-icon-pencil"> 取消订单</span></button>';

        // '付款'按钮
        let btnPay = '<button type="button" class="am-btn am-btn-default am-text-secondary am-btn-xs app-table-button-padding" onclick="top.location.href=\'payment_confirm.html?id=' + order.id + '\'">'
            + '<strong class="am-icon-trash-o"> 付款</strong></button>';

        // '确认收货'按钮
        let btnReceive = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-success app-table-button-padding" onclick="completeOrder(\'' + order.id + '\')">'
            + '<strong class="am-icon-flag"> 确认收货</strong></button>';

        // 操作封装
        // 判断当前订单状态是否为'未付款'
        if( order.status == ORDER_STATUS_CONST.UN_PAY ) {
            // 显示'取消订单'按钮
            tdOpt += btnCancel;
            // 显示'付款'按钮
            tdOpt += btnPay;
        }

        // 判断当前订单状态是否为'全部发货'
        if( order.status == ORDER_STATUS_CONST.FULL_SHIPPED) {
            // 显示'确认收货'按钮
            tdOpt += btnReceive;
        }

        tdOpt += '</div></td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblReceiveOrderList tbody').append('<tr>' + tdOrderNo + tdCreateTime + tdPayment + tdProductName + tdStatus + tdOpt + '</tr>');

    }// for();



}// fillReceiveOrderList();

/** 填充‘出货订单列表’数据 **/
function fillSendOrderList(){

    let orderDetailList = indexMap.sendOrderDetailList;

    // 清空表格数据
    $('#tblSendOrderDetailList tbody').empty();
    // 隐藏显示提示
    $('#sendNoData').hide();

    // 如果没有集合数据，就直接返回
    if( !orderDetailList || orderDetailList.length == 0 ){
        // 设置没有数据提示
        $('#sendNoData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < orderDetailList.length; i++ ) {

        let orderDetail = orderDetailList[i];

        // 订单编号
        let tdOrderNo = '<td><strong>' + orderDetail.orderNo + '</strong></td>';

        // 下单时间
        let tdCreateTime = '<td><span title="' + orderDetail.createTime + '">' + orderDetail.createTime + '</span></td>';

        // 订单金额
        let tdPayment = '<td><strong class="am-text-danger">' + priceCurrencyFormat(orderDetail.totalPrice) + '</strong></td>';

        // 买家
        let tdUsername = '<td><strong><a target="_blank" href="seller_item_list.html?id=' + orderDetail.userId + '">' + orderDetail.username + '</a></strong></td>';


        // 订单状态
        let status = ORDER_SEND_STATUS[orderDetail.sendStatus];
        // 订单状态样式
        let statusIcon = ORDER_STATUS_ICON[orderDetail.sendStatus];

        let tdStatus = '<td><span class="am-badge ' + statusIcon + '">' + status + '</span></td>';

        // 商品名称
        let tdProductName = '<td><a target="_blank" title="' + orderDetail.productName
                            + '" href="product_content.html?id=' + orderDetail.productId
                            + '&cid=' + orderDetail.categoryId + '">'
                            + '<div class="am-text-truncate shop-text-truncate-order-product-name">'
                            + orderDetail.productName + '</div></a></td>';



        // 将构造好的单元格数据，填充到表格中
        $('#tblSendOrderDetailList tbody').append('<tr>' + tdOrderNo + tdUsername + tdCreateTime + tdPayment + tdProductName + tdStatus + '</tr>');

    }// for();

}// fillSendOrderList();

/** 确认收货 **/
function completeOrder( orderId ) {

    Modal.register(['confirm','alert']);
    Modal.confirm("您确定订单商品都收到了吗？",{
        relatedTarget: this,
        onConfirm: function(options) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/order/complete',
                dataType: "json",
                async: false,
                data: { token: token, orderId: orderId},
                success: function( result ) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert('订单全部收货成功！');

                    // 重新加载首页数据
                    loadIndex();

                }// success: function( result );
            });
        }// onConfirm: function(options);
    });
}// completeOrder( orderId );

</script>
</html>